<template>
	<view class="coupon_container">
		<!-- 轮播图 -->
		<view class="swiper_container">
			<view class="pic_container">
				<u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular radius="5" height="100"
					bgColor="#00196D"></u-swiper>
			</view>
		</view>
		<!-- 优惠券列表 -->
		<scroll-view class="scroll_container" scroll-y="true" :enhanced="true" :show-scrollbar="false" v-if="couponList.length > 0">
			<view class="scroll_item" v-for="(item,index) in couponList" :key="index">
				<view class="img_container">
					<image :src="item.backImg" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="content_container">
					<view class="info_container">
						<view class="info_title">{{item.name}}</view>
						<view class="info_text">{{item.notes}}</view>
					</view>
					<view class="btn_container">
						<view class="btn_left">
							<view class="pre_price">
								<text>已优惠</text>
								<text style="font-size: 20rpx;">￥</text>
								<text
									style="font-size: 32rpx;">{{Number(item.unitPrice) - Number(item.salesPrice)}}</text>
							</view>
							<view class="ori_price">
								<text>原套价￥{{item.unitPrice}}</text>
							</view>
						</view>
						<view class="btn_right" @click="buyClick(item.id)">
							<view class="tip_icon">
								<image src="../../../static/img/coupon/tip.png" style="width: 100%;height: 100%;">
								</image>
							</view>
							<view style="display: flex;flex-direction: column;align-items: center;">
								<view class="">
									<span style="font-size: 20rpx;">￥</span>
									<span style="font-size: 32rpx;">{{item.salesPrice}}</span>
								</view>
								<view style="font-size: 18rpx;">
									购买
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="no_date" v-else>
			暂无优惠活动
		</view>

		<u-modal :show="infoFlag" :closeOnClickOverlay="true" :showConfirmButton="false" width="686rpx"
			negativeTop="100" @close="infoFlag = false">
			<view class="modal_container">
				<view class="content_box">
					<!-- <view class="modal_img">
						<image src="../../../static/img/coupon/item_demo.png" style="width: 100%;height: 100%;"></image>
					</view> -->
					<view class="modal_content">
						<view class="modal_title">{{detailInfo.name}}</view>
						<view class="content_item" v-for="(item,index) in detailInfo.items" :key="item.couponId">
							<view class="modal_info">
								<view class="modal_label">
									<span>内容</span>
									<span v-if="detailInfo.items.length > 1">{{index + 1}}：</span>
									<span v-if="detailInfo.items.length == 1">：</span>
								</view>
								<view style="flex: 1;">
									<view>
										{{item.couponName}}
									</view>
								</view>
							</view>
							<view class="modal_info">
								<view class="modal_label">
									<span>期限</span>
									<span v-if="detailInfo.items.length > 1">{{index + 1}}：</span>
									<span v-if="detailInfo.items.length == 1">：</span>
								</view>
								<view style="flex: 1;">
									<view>
										{{item.couponUsedDay}}天内
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="modal_btn" @click="buyConfirm()">立即支付￥{{detailInfo.salesPrice}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getCouponPackList,
		getCouponpackById,
		CreatePackOrder,
		getCouponPayParam
	} from "../../../api/coupon.js"
	import {
		mapState,
		mapMutations
	} from 'vuex' // vuex
	export default {
		data() {
			return {
				pageParam: {
					pageSize: 10,
					pageIndex: 1
				},
				infoFlag: false,
				swiperList: [
					'http://applet.atptest.com/ymnsWDqd1698289007502.jpg?v=1698289007692',
					'http://applet.atptest.com/uSgUqB1Y1698289101480.jpg?v=1698289101682',
					'http://applet.atptest.com/kUUTg5bz1698289132052.jpg?v=1698289132215',
				],
				couponList: [],
				detailInfo: {
					name: "",
					salesPrice: "",
					items: []
				},
				packOrderNo: ""
			}
		},
		onShow() {
			// token不存在，调小程序登陆接口获取code,通过code获取token
			if (!uni.getStorageSync('token')) {
				this.getInfo()
			}
			this.getList()
		},
		methods: {
			...mapMutations('user', ['setToken']),
			
			// 通过微信code获取token
			getInfo() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.code = res.code
						this.getToken() 
					}
				})
			},
			
			// 获取token
			async getToken() { 
				const _that = this
				uni.request({
					url: 'https://wechat.atptest.com:44386/connect/token',
					data: {
						code: _that.code,
						grant_type: 'wechat',
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Basic QXBpX1dlYjpBcGlfV2Vi'
					},
					success(res) {
						console.log("App 获取到了token");
						_that.setToken(res.data.access_token);
						_that.getList();
					}
				})
			},
			
			//获取优惠券列表
			async getList() {
				uni.showLoading({
					title: '加载中',
				});
				const res = await getCouponPackList();
				if (res) {
					this.couponList = res
				} else {
					this.couponList = []
				}
				uni.hideLoading();
			},

			// 根据id获取详情数据
			async getCouponpackById(id) {
				const res = await getCouponpackById({
					id
				})
				if (res) {
					this.detailInfo = res
				}
			},

			//购买弹框
			buyClick(id) {
				this.getCouponpackById(id)
				this.infoFlag = true;
			},

			//创建优惠券礼包订单
			async createPackOrder() {
				uni.showLoading({
					title: '加载中',
				});
				const res = await CreatePackOrder({
					couponPackId: this.detailInfo.id
				})
				console.log("订单信息", res);
				if (res.orderNo) {
					this.packOrderNo = res.orderNo
				} else {
					this.packOrderNo = ""
					uni.hideLoading();
					// 成功回调
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: "error"
					});
				}
			},

			//立即支付按钮
			async buyConfirm() {
				uni.showLoading({
					title: '加载中',
				});
				await this.createPackOrder()
				console.log("this.packOrderNo", this.packOrderNo);
				if (this.packOrderNo) {
					if (Number(this.detailInfo.salesPrice) == 0) {
						uni.hideLoading();
						// 成功回调
						uni.showToast({
							title: '购买成功!',
							duration: 2000,
						});
						setTimeout(() => {
							this.infoFlag = false
							this.getList()
						}, 2000)
					} else {
						getCouponPayParam({
							orderNo: this.packOrderNo
						}).then((res) => {
							console.log("支付信息", res);
							const _that = this
							if (_that.detailInfo) {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.timeStamp,
									nonceStr: res.nonceStr,
									package: res.package,
									signType: res.signType,
									paySign: res.paySign,
									success: function(res) {
										uni.hideLoading();
										// 成功回调
										uni.showToast({
											title: '购买成功!',
											duration: 2000,
										});
										_that.getList()
										_that.infoFlag = false
									},
									fail: function(err) {
										uni.hideLoading();
										uni.showToast({
											title: '取消支付',
											duration: 2000,
											icon: "error"
										});
									}
								});
							}
						}).catch(() => {
							uni.hideLoading();
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon_container {
		width: 100%;
		height: 100%;

		.swiper_container {
			width: 100%;
			height: 452rpx;
			background-color: #00196D;
			z-index: -1;

			.pic_container {
				margin: 0 auto;
				padding-top: 70rpx;
				box-sizing: border-box;
			}
		}

		.scroll_container {
			width: 100%;
			max-height: 1150rpx;
			padding: 0 32rpx;
			padding-bottom: 200rpx;
			box-sizing: border-box;
			margin-top: -144rpx;

			.scroll_item {
				width: 100%;
				height: 260rpx;
				background: #fff;
				box-shadow: 0px 0rpx 8rpx rgba(0, 0, 0, 0.25);
				border: 1px solid rgb(230, 230, 230);
				border-radius: 16rpx;
				padding: 16rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin-bottom: 22rpx;

				.img_container {
					width: 228rpx;
					height: 226rpx;
					border-radius: 10rpx;
				}

				.content_container {
					flex: 1;
					height: 100%;
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.info_container {
						.info_title {
							color: rgb(34, 34, 34);
							font-family: 思源黑体;
							font-size: 28rpx;
							font-weight: bold;
						}

						.info_text {
							color: rgb(175, 175, 175);
							font-family: 思源黑体;
							font-size: 18rpx;
							font-weight: 400;
							margin-top: 20rpx;
						}
					}

					.btn_container {
						width: 100%;
						height: 90rpx;
						border-radius: 16rpx;
						display: flex;

						.btn_left {
							width: 60%;
							background: linear-gradient(90.00deg, rgb(31, 60, 161), rgb(25, 63, 195) 100%);
							padding-top: 4rpx;
							padding-left: 18rpx;
							box-sizing: border-box;
							border-radius: 16rpx 0px 0px 16rpx;
							position: relative;
							display: flex;
							flex-direction: column;
							justify-content: center;

							.pre_price {
								color: rgb(255, 255, 255);
								font-family: 思源黑体;
								font-size: 20rpx;
								font-weight: 400;
							}

							.ori_price {
								color: rgba(255, 255, 255, 0.58);
								font-family: 思源黑体;
								font-size: 18rpx;
								font-weight: 400;
							}
						}

						.btn_left :before {
							width: 10rpx;
							height: 30rpx;
							content: "";
							background: rgb(190, 205, 255);
							position: absolute;
							right: 0;
							bottom: 0
						}

						.btn_right {
							position: relative;
							width: 40%;
							background: rgb(190, 205, 255);
							box-sizing: border-box;
							color: rgb(26, 62, 187);
							border-radius: 0px 16rpx 16rpx 0px;
							display: flex;
							flex-direction: column;
							justify-content: center;

							.tip_icon {
								position: absolute;
								top: 0;
								left: -20rpx;
								width: 48rpx;
								height: 105rpx;
							}
						}
					}
				}
			}
		}
		.no_date {
			width: 100%;
			height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			color: #9B9B9B;
		}

		.modal_container {
			width: 100%;

			.content_box {
				display: flex;

				.modal_img {
					width: 276rpx;
					height: 276rpx;
				}

				.modal_content {
					flex: 1;
					margin-left: 28rpx;

					.modal_title {
						color: rgb(34, 34, 34);
						font-family: 思源黑体;
						font-size: 36rpx;
						font-weight: bold;
					}

					.content_item {
						background-color: #f5f6f7;
						padding: 10rpx;
						box-sizing: border-box;
						margin-top: 10rpx;
					}

					.modal_info {
						color: rgb(34, 34, 34);
						font-family: 思源黑体;
						font-size: 24rpx;
						font-weight: 500;
						display: flex;
						margin: 10rpx 0;

						.modal_label {
							width: 100rpx;
							text-align: right;
							font-weight: bold;
						}
					}
				}
			}

			.modal_btn {
				width: 360rpx;
				height: 66rpx;
				background: rgb(26, 62, 188);
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgb(255, 255, 255);
				font-family: 思源黑体;
				font-size: 28rpx;
				font-weight: 500;
				margin: auto;
				margin-top: 26rpx;
			}
		}
	}
</style>